<template>
	<view class="container">
		<view class="blue_bg" />
		<view class="table_til">
			<view :class="{ 'active': active === 0 }" @click="onActive(0)">
				进行中
			</view>
			<view :class="{ 'active': active === 1 }" @click="onActive(1)">
				已完成
			</view>
		</view>
		<view class="table_search">
			<view class="left">
				<view class="cao">维修方式:</view>
				<uni-data-select v-model="wxfs_value" :localdata="range" @change="change" :clear="false"
					width="200rpx"></uni-data-select>
			</view>
			<view class="right">
				<view class="example-body box">
					<text @click="toggle">预约日期</text>
				</view>
				<view>
					<!-- 日期选择弹窗 -->
					<uni-popup ref="popup" background-color="#fff">
						<view class="popup-content">
							<view class="all_date">
								<view class="">
									开始时间
								</view>
								<view class="date_time">
									年月日
								</view>
								<view class="date_time">
									时分
								</view>
							</view>
							<view class="all_date">
								<view class="">
									结束时间
								</view>
								<view class="date_time">
									年月日
								</view>
								<view class="date_time">
									时分
								</view>
							</view>
						</view>
					</uni-popup>
				</view>
			</view>
		</view>
		<view class="table_body">
			<view v-for="(item,index) in list" :key="index" class="table_item">
				<view class="row">
					维修单号:<text>{{item.id}}</text>
				</view>
				<view class="row">
					维修方式:<text>{{item.method}}</text>
				</view>
				<view class="row">
					预约日期:<text>{{item.date}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				wxfs_value: 0,
				range: [{
						value: 0,
						text: "全部服务"
					}, {
						value: 1,
						text: "到店维修"
					},
					{
						value: 2,
						text: "上门取车"
					},
				],
				list: [{
					id: 44378,
					method: '到店维修',
					date: '2022/07/24 12:20'
				},{
					id: 44378,
					method: '上门取车',
					date: '2022/07/24 12:20'
				},{
					id: 44378,
					method: '到店维修',
					date: '2022/07/24 12:20'
				}]
			}
		},
		methods: {
			onActive(e) {
				this.active = e;
			},
			change(e) {},
			toggle() {
				this.$refs.popup.open()
			},
		}
	}
</script>

<style>
	@import '@/static/images/ryx/all.css';

	.table_til {
		width: 100vw;
		padding-top: 20rpx;
		color: #fff;
		background-color: #2679f5;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-evenly;
	}

	.active {
		border-bottom: #fff solid 2px;
	}

	.table_search {
		width: 80vw;
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.table_search .left {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	.table_search .left .cao {
		margin-right: 10rpx;
	}

	.popup-content {
		width: 90vw;
		background-color: #fff;
		margin-top: -35vh;
	}

	.all_date {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-evenly;
		align-items: center;
	}

	.all_date view {
		margin: 40rpx;
	}

	.all_date .date_time {
		padding: 10rpx 40rpx;
		background-color: #f2f2f2;
		border-radius: 50rpx;
	}

	.table_item {
		width: 80vw;
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.table_item view {
		margin: 20rpx;
	}

	.table_item text {
		margin-left: 30rpx;
		color: #808080;
	}
</style>